<template>
  <div class="UserDetail-container">
    <el-form ref="userDetailFormRef" style="width: 100%" :model="userDetail" label-width="120px">
      <el-form-item label="ID">
        {{ userDetail.id }}
      </el-form-item>
      <el-form-item label="账号">
        {{ userDetail.loginAct }}
      </el-form-item>
      <el-form-item label="姓名">
        {{ userDetail.name }}
      </el-form-item>
      <el-form-item label="手机号">
        {{ userDetail.phone }}
      </el-form-item>
      <el-form-item label="邮箱">
        {{ userDetail.email }}
      </el-form-item>
      <el-form-item label="账号未过期">
        {{ 1 == userDetail.accountNoExpired ? '是' : '否' }}
      </el-form-item>
      <el-form-item label="密码未锁定">
        {{ 1 == userDetail.credentialsNoExpired ? '是' : '否' }}
      </el-form-item>
      <el-form-item label="账号未锁定">
        {{ 1 == userDetail.accountNoLocked ? '是' : '否' }}
      </el-form-item>
      <el-form-item label="账号是否能用">
        {{ 1 == userDetail.accountEnabled ? '是' : '否' }}
      </el-form-item>
      <el-form-item label="创建时间">
        {{ userDetail.createTime }}
      </el-form-item>
      <el-form-item label="修改时间">
        {{ userDetail.editTime }}
      </el-form-item>
      <el-form-item label="修改人">
        {{ userDetail.editByDO?.name }}
      </el-form-item>
      <el-form-item label="上一次登录时间">
        {{ userDetail.lastLoginTime }}
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="goBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="UserDetail">
import httpRequest from '@/http/httpRequest'
import { onMounted, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
// const router = useRouter()
interface IUserDetail {
  id: number | null
  loginAct: string
  name: string
  phone: string
  email: string
  accountNoExpired: number | null
  credentialsNoExpired: number | null
  accountNoLocked: number | null
  accountEnabled: number | null
  createTime: string
  createBy: string
  editTime: string
  editBy: string
  lastLoginTime: string
  editByDO: TUser | null
}
interface TUser {
  id: number | null
  name: string
}
const route = useRoute()
const router = useRouter()
const id: string = route.params.id as string
console.log('UserDetail', route.params.id)
let userDetail = reactive<IUserDetail>({
  id: null,
  loginAct: '',
  name: '',
  phone: '',
  email: '',
  accountNoExpired: null,
  credentialsNoExpired: null,
  accountNoLocked: null,
  accountEnabled: null,
  createTime: '',
  createBy: '',
  editTime: '',
  editBy: '',
  lastLoginTime: '',
  editByDO: null,
})
const getUserDetail = (id: string) => {
  httpRequest
    .doGet('/api/user/' + id, {})
    .then((res) => {
      if (res.data.code == 200) {
        Object.assign(userDetail, res.data.data)
      }
    })
    .catch((error) => {})
}
onMounted(() => {
  getUserDetail(id)
})
let goBack = () => {
  router.go(-1)
}
</script>

<style scoped lang="scss">
.UserDetail-container {
  min-height: 100%;
}
</style>
